<template>
	<view>
		<view class="container-practice" v-if="practoceList && practoceList.length">
			<view class="practice-top">
				<view class="practice-top-currentPage">{{ currentPage }}<span>/{{ practoceList.length }}</span></view>
				<view class="practice-top-slider">
					<u-slider v-model="currentPage" :disabled="true"  blockWidth="0" min="1"
						:max="practoceList.length || 1000" active-color="#0CB76C">
					</u-slider>
				</view>
				<view class="practice-top-switch" @click="switchManual">
					<view :class="active == 1 ? 'active' : ''">自动</view>
					<view :class="active == 2 ? 'active' : ''">手动</view>
				</view>
			</view>
			<view class="practice-img" v-if="practoceList.length">
				<img :src="practoceList[currentPage - 1].wordPic" />
			</view>
			<view class="practice-context" v-if="practoceList.length">
				<view class="practice-context-title">{{ practoceList[currentPage - 1].words }}</view>
				<view class="practice-context-context" v-if="practoceList[currentPage - 1].symbol">
					[{{ practoceList[currentPage - 1].symbol }}]</view>
				<view class="practice-context-context">{{ practoceList[currentPage - 1].pretations }}</view>
				<view class="practice-context-bottom">
					<view>例句</view>
					<view>{{ practoceList[currentPage - 1].sentences }}</view>
					<!-- <view>He looks nervous.</view> -->
				</view>
			</view>

			<view class="practiceFractionBox">
				<view class="practiceFraction"
					v-if="practoceList[currentPage - 1].sourceObj && recordingStatus=='ended'">
					<view :class="autoColor(practoceList[currentPage - 1].sourceObj.total_score)">
						{{
							Math.round(practoceList[currentPage - 1].sourceObj.total_score) }}分
					</view>
					<img src="@/assets/phoneticPractice/scoreSrcRed.png"
						v-if="practoceList[currentPage - 1].sourceObj.total_score<60&&recordingStatus=='ended'" />
					<img src="@/assets/phoneticPractice/scoreSrcYellow.png"
						v-if="(practoceList[currentPage - 1].sourceObj.total_score>60&&practoceList[currentPage - 1].sourceObj.total_score<80)&&recordingStatus=='ended'" />
					<img src="@/assets/phoneticPractice/scoreSrcGreed.png"
						v-if="practoceList[currentPage - 1].sourceObj.total_score>80&&recordingStatus=='ended'" />
					<view class="context">
						<view class="label">完成度</view>
						<view :class="autoColor(practoceList[currentPage - 1].sourceObj.accuracy_score)">{{
							Math.round(practoceList[currentPage - 1].sourceObj.accuracy_score) }}</view>
					</view>
					<view class="context">
						<view class="label">流利度</view>
						<view :class="autoColor(practoceList[currentPage - 1].sourceObj.fluency_score)">{{
							Math.round(practoceList[currentPage - 1].sourceObj.fluency_score) }}</view>
					</view>
					<view class="context">
						<view class="label">准确度</view>
						<view :class="autoColor(practoceList[currentPage - 1].sourceObj.integrity_score)">{{
							Math.round(practoceList[currentPage - 1].sourceObj.integrity_score) }}</view>
					</view>
				</view>

			</view>
			<view class="practice-button">
				<!-- v-if="active == 2" -->
				<view class="wordsVoice" v-if="active == 2">
					<img src="@/assets/phoneticPractice/话筒效果-2.gif" v-if="recordingStatus == 'playing'" />
					<img @click="onlyPlayAudio" src="@/assets/phoneticPractice/声音@3x.png" v-else />

				</view>
				<!-- 弹性盒占位 -->
				<view class="wordsVoice" v-else>
				</view>
				<view class="wordsPlay" v-if="active == 2">
					<!-- @click="tapeClick" -->
					<view class="circle-container" v-show="recordingStatus == 'recording'">
						<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
							<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
								stroke-width="1" />
							<circle class="circle" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
								stroke-dasharray="100.48" stroke-dashoffset="100.48" />
						</svg>
						<img src="@/assets/phoneticPractice/录音@3x.png" style="position: absolute;" />
					</view>
					<img src="@/assets/phoneticPractice/录音@3x.png" v-if="recordingStatus != 'recording'"
						@click="tapeClick" />
				</view>
				<view class="wordsPlay" v-if="active == 1">
					<view class="circle-container" v-show="recordingStatus == 'recording'">
						<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
							<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
								stroke-width="1" />
							<circle class="circle" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
								stroke-dasharray="100.48" stroke-dashoffset="100.48" />
						</svg>
						<img src="@/assets/phoneticPractice/语音动画效果01.gif" style="position: absolute;" />
					</view>
					<view class="circle-container" v-show="recordingStatus == 'playing'">
						<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
							<circle class="circle-bg" cx="18" cy="18" r="16" fill="none" stroke="#ffffff"
								stroke-width="1" />
							<circle class="circle2" cx="18" cy="18" r="16" fill="none" stroke="#0CB76C" stroke-width="1"
								stroke-dasharray="100.48" stroke-dashoffset="100.48" />
						</svg>
						<img src="@/assets/phoneticPractice/读@3x.png" style="position: absolute;" />
					</view>
				</view>
				<view class="myVoice">
					<!-- recordingStatus=='ended'|| -->
					<view class="circle-container1"
						v-show="recordingStatus == 'ended' && active == 2 && isPlayMyVideo">
						<svg class="circle-progress" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
							<circle :class="isPlayMyVideo ? 'circle1' : ''" cx="18" cy="18" r="16" fill="none"
								stroke="#0CB76C" stroke-width="1" stroke-dasharray="100.48"
								stroke-dashoffset="100.48" />
						</svg>
						<img src="@/assets/phoneticPractice/播放@3x.png" style="position: absolute;" />
					</view>
					<view v-show="recordingStatus == 'ended' && active == 2 && !isPlayMyVideo">
						<img src="@/assets/phoneticPractice/播放@3x.png" @click="playRecording" />
					</view>
					<view @click="completeClick" class="practice-button-complete"
						v-show="active == 2 && recordingStatus == 'recording'">完成录音</view>
				</view>
			</view>
			<!-- 填充盒子 -->
			<view class="fillBox">
			</view>
			<view class="practice-bottom" v-show="active == 2">
				<view @click="previous">上一个</view>
				<view @click="next"
					v-show="practoceList[currentPage - 1].video || (active == 2 && recordingStatus == 'ended')">
					下一个</view>
			</view>
			<view class="practice-bottom" v-show="active == 1">
				<img class="practice-bottom-img" v-if="isPlay=='stop'" src="@/assets/phoneticPractice/形状@3x.png"
					@click="automaticPlay" />
				<img class="practice-bottom-img" v-if="isPlay=='play'" src="@/assets/phoneticPractice/暂停@3x.png"
					@click="automaticPlay" />
			</view>
		</view>
		<u-popup :show="automaticOverlay" mode="center" :round="10">
			<view class="automaticOverlay">
				<view class="automaticOverlay-context" v-if="active == 1">手动模式可重读跟读，需要您自主操作进行跟读流程,确定切换吗?</view>
				<view class="automaticOverlay-context" v-if="active == 2">关闭手动模式将自动进行跟读流程，确认关闭吗?</view>
				<view class="automaticOverlay-button">
					<view @click="automaticOverlay = false">取消</view>
					<view @click="switchAutomatic">确定</view>
				</view>
			</view>
		</u-popup>

		<!-- <u-loading-page :show="recordingStatus == 'evaluating'" loadingText="评分中..."
			bgColor="#e8e8e8"></u-loading-page> -->
		<u-overlay :show="recordingStatus == 'evaluating'">
			<view class="loading">
				<u-loading-icon text="评分中..." color="#ffffff" textColor="#ffffff" textSize="18"></u-loading-icon>
			</view>
		</u-overlay>
		<!-- <audio ref="audioElement" :src="audioSrc" @ended="playEnded"></audio>
		<audio ref="dingAudioElement" :src="dingAudioSrc"></audio> -->
	</view>
</template>

<script setup>
	import {
		getUserPlaySetting,
		setUserPlaySetting
	} from '@/api/user'
	import {
		uploadFiles,
		getPhoneticPracticeWords,
		savePhoneticPracticeScore
	} from '@/api/phoneticPractice'
	import IatRecorder from '@/utils/iatRecorder'
	let iatRecorder = new IatRecorder()
	let mediaRecorder;
	let recordedChunks = [];
	let totalTime = 0
	export default {
		data() {
			return {
				currentPage: 1,
				active: 1,
				automaticOverlay: false,
				title: null,
				practoceList: [],
				audioElement: null,
				recordingStatus: "notStarted",
				isOnlyPlayAudio: false,
				setTimeoutVal: null,
				dingAudioElement: null,
				stream: null,
				sourceTimeoutVal: null,
				completeTimeoutVal: null,
				isPlayMyVideo: false,
				isPlay: 'stop',
				versionId: null,
				title: null
			}
		},
		watch: {
			currentPage(newVal, oldVal) {
				if (this.practoceList.length) {
					iatRecorder = new IatRecorder({
						text: this.practoceList[newVal - 1].words
					})
					this.playAudio()
				}
			}
		},
		onLoad(options) {
			totalTime = Date.now();
			if (options) {
				this.versionId = options.versionId
				this.title = options.title
				uni.setNavigationBarTitle({
					title: this.title
				})
				this.getMissionAnswerDetail()
				this.getUserSetting()
			}
		},
		destroyed() {
			// console.log(11111)
			if (mediaRecorder) {
				this.stopRecording() //结束录音
			}
			if (this.stream) {
				this.stream.getTracks().forEach(track => track.stop())
			}
			if (iatRecorder) {
				iatRecorder.stop()
			}
			this.audioElement.destroy()
			this.audioElement = null
			clearTimeout(this.setTimeoutVal)
			clearTimeout(this.sourceTimeoutVal)
			clearTimeout(this.completeTimeoutVal)
		},
		methods: {
			//获取用户设置
			getUserSetting() {
				getUserPlaySetting().then(res => {
					if (res.code == 1) {
						this.active = res.data.symbol_set
						this.automaticPlay()
					}
				})
			},
			//设置用户设置
			setUserSetting() {
				if (this.active == 2) {
					this.active = 1
				} else {
					this.active = 2
				}
				setUserPlaySetting({
					symbol_set: this.active
				}).then(res => {
					if (res.code == 1) {
						this.getUserSetting()
					}
				})
			},
			switchAutomatic() {
				this.setUserSetting()
				this.automaticOverlay = false
			}, //修改用户配置状态
			switchManual() {
				this.automaticOverlay = true
				this.isPlay = 'stop'
				this.recordingStatus = 'notStarted'
				if (mediaRecorder) {
					this.stopRecording()
				}
				if (iatRecorder) {
					iatRecorder.stop()
				}
				clearTimeout(this.setTimeoutVal)
			},
			//获取音标专练单词列表
			getMissionAnswerDetail() {
				getPhoneticPracticeWords({
					versionId: this.versionId
				}).then(res => {
					this.practoceList = res.data
					iatRecorder = new IatRecorder({
						text: this.practoceList[0].words
					})
					this.playAudio()
				})
			},
			autoColor(num) {
				if (num < 60) {
					return 'autoRed' //#FA192C
				} else if (num > 60 && num < 80) {
					return 'autoYellow' //#FF9917
				} else if (num > 80) {
					return 'autoGreed' //#0CB76C
				}
			},
			//保存跟读信息
			saveFollow() {
				let obj = this.practoceList[this.currentPage - 1]
				savePhoneticPracticeScore({
					versionId: this.versionId,
					wId: obj.wId,
					score: Math.round(obj.sourceObj.total_score),
					integrity: Math.round(obj.sourceObj.integrity_score),
					fluency: Math.round(obj.sourceObj.fluency_score),
					accuracy: Math.round(obj.sourceObj.accuracy_score),
					video: obj.video
				}).then(res => {
					
					setTimeout(() => {
						if (this.active == 1 && this.isPlay == 'play') { //自动
							this.next()
						}
					}, 1000)
				})
			},
			// 只播放音频不触发录音
			onlyPlayAudio() {
				if (this.recordingStatus != 'ended') {
					return
				}
				this.isOnlyPlayAudio = true
				// this.audioElement = uni.createInnerAudioContext();
				this.audioElement.src = this.practoceList[this.currentPage - 1].wordFile;;
				this.audioElement.autoplay = true;
			},
			// 播放音频
			playAudio() {
				let that = this
				this.isOnlyPlayAudio = false
				this.recordingStatus = 'playing'
				// 创建并播放音频对象
				this.audioElement = uni.createInnerAudioContext();
				this.audioElement.src = this.practoceList[this.currentPage - 1].wordFile;
				this.audioElement.autoplay = true;
				this.audioElement.onEnded(() => {
					this.playEnded()
				});
			},
			//播放结束
			playEnded() {
				this.isPlayMyVideo = false //结束自己的音频播放
				if (this.isOnlyPlayAudio) {
					// recordingStatus = 'playEnded'
					return false
				}
				if (this.active == 1 && this.isPlay == 'play') {
					this.tapeClick()
				} else if (this.active == 1 && this.isPlay == 'stop') {
					this.recordingStatus = 'notStarted'
				}
				if (this.active == 2 && !this.practoceList[this.currentPage - 1].video) {
					this.tapeClick()
				}
			},
			//上一个
			previous() {
				if (this.currentPage == 1) {
					return uni.showToast({
						title: '已经是第一个了',
						icon: 'none'
					})
				}
				if (this.currentPage) this.currentPage--
			},
			// 下一个
			next() {
				this.recordingStatus = 'notStarted'
				recordedChunks = []
				//提交任务
				if (this.currentPage == this.practoceList.length) {
					let use_time = Math.floor((Date.now() - totalTime) / 1000);
					uni.navigateTo({
						url: "/pages/phoneticPractice/submitTask?title=" + this.title + '&versionId=' + this
							.versionId + '&use_time=' + use_time
					})
				} else {
					this.currentPage++
				}
			},
			//语音识别
			tapeClick() {
				this.dingAudioElement = uni.createInnerAudioContext();
				this.dingAudioElement.src = "https://oss.bigchun.com/file/ding.mp3"
				this.dingAudioElement.autoplay = true;
				//分数清除
				if (this.practoceList[this.currentPage - 1].sourceObj) {
					this.practoceList[this.currentPage - 1].sourceObj = null
				}
				//音频清除
				if (this.practoceList[this.currentPage - 1].video) {
					this.practoceList[this.currentPage - 1].video = null
					this.practoceList[this.currentPage - 1].fullVideo = null
				}
				this.recordingStatus = 'recording'
				this.startRecording() //录音
				iatRecorder.start()
				this.setTimeoutVal = setTimeout(async () => {
					this.completeClick()
				}, 5000);
			},
			uploadFilePromise() {
				const blob = new Blob(recordedChunks, {
					type: "audio/webm;codecs=opus"
				});
				var file = new File([blob], this.practoceList[this.currentPage - 1].words + '-' + Date.now() + '.MP3', {
					type: 'audio/x-mpeg',
					lastModified: Date.now()
				});
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: 'https://d-xueer.bigchun.com/api/common/upload', // 仅为示例，非真实的接口地址
						file: file,
						header: {
							token: uni.getStorageSync('token'),
						},
						success: (res) => {
							let response = JSON.parse(res.data)
							if (response.code == 1) {
								setTimeout(() => {
									resolve(response)
								}, 1000)
							}
						}
					});
				})
			},
			//完成识别
			completeClick() {
				let that = this
				clearTimeout(this.setTimeoutVal)
				this.recordingStatus = 'evaluating'
				iatRecorder.stop()
				this.stopRecording() //结束录音
				this.completeTimeoutVal = setTimeout(async () => {
					if (iatRecorder.getScoreObj()) {
						that.practoceList[that.currentPage - 1].sourceObj = iatRecorder.getScoreObj()
						if (that.practoceList[that.currentPage - 1].sourceObj.total_score == 0) {
							that.sourceTimeoutVal = setTimeout(() => {
								that.againRead()
							}, 1000)
							return uni.showToast({
								title: '请提高朗读音量,以免影响评分',
								icon: 'none'
							})
						}
						let urlData = await that.uploadFilePromise()
						if (urlData.code == 1) {
							that.practoceList[that.currentPage - 1].video = urlData.data.url
							that.practoceList[that.currentPage - 1].fullVideo = urlData.data.fullurl
							that.recordingStatus = 'ended'
							that.saveFollow()
						}
					} else {
						uni.showToast({
							title: '录音解析失败',
							icon: 'none'
						})
						that.practoceList[that.currentPage - 1].sourceObj = null
					}
				}, 2000);
			},
			// 重读
			againRead() {
				this.practoceList[this.currentPage - 1].sourceObj = null
				this.recordingStatus = 'notStarted'
				this.playAudio()
			},
			async startRecording() {
				recordedChunks = []
				this.stream = await navigator.mediaDevices.getUserMedia({
					audio: true
				});
				mediaRecorder = new MediaRecorder(this.stream);
				mediaRecorder.addEventListener('dataavailable', event => {
					recordedChunks.push(event.data);
				});
				mediaRecorder.start();
			},
			stopRecording() {
				this.practoceList[this.currentPage - 1].recordedChunks = recordedChunks
				mediaRecorder.stop();
			},
			playRecording() {
				this.isPlayMyVideo = true
				this.isOnlyPlayAudio = true
				// this.audioElement = uni.createInnerAudioContext();
				this.audioElement.src = this.practoceList[this.currentPage - 1].fullVideo;
				this.audioElement.autoplay = true;
			},
			automaticPlay() {
				if (this.isPlay == 'stop') {
					this.isPlay = 'play'
					if (this.practoceList[this.currentPage - 1] && !this.practoceList[this.currentPage - 1].video) {
						this.playAudio()
					}
					if (this.practoceList[this.currentPage - 1] && this.practoceList[this.currentPage - 1].video) {
						this.next()
					}
				} else {
					this.isPlay = 'stop'
					this.recordingStatus = 'notStarted'
					this.stopRecording() //结束录音
					iatRecorder.stop()
					clearTimeout(this.setTimeoutVal)
				}
			}
		}
	}
</script>
<style>
	page {
		min-height: 100%;
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		height: 100%;
		font-size: 18px;

		.text {
			margin-left: 10px;
		}
	}

	.circle-container {
		width: 70px;
		/* 容器大小，根据需要调整 */
		height: 70px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-container1 {
		width: 40px;
		/* 容器大小，根据需要调整 */
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.circle-progress {
		width: 100%;
		height: 100%;
	}

	.circle-bg {
		stroke: #FFFFFF;
		/* 背景圆线条颜色 */
	}

	.circle {
		/* 动画定义 */
		animation: progress 5s ease-out forwards;
	}

	.circle1 {
		/* 动画定义 */
		animation: progress 2s ease-out forwards;
	}

	.circle2 {
		/* 动画定义 */
		animation: progress 1s ease-out forwards;
	}


	@keyframes progress {
		0% {
			stroke-dashoffset: 100.48;
			/* 初始时，线条完全不可见 */
		}

		100% {
			stroke-dashoffset: 0;
			/* 结束时，线条完全可见 */
		}
	}

	.fillBox {
		height: 140px;
	}

	.container-practice {
		// display: flex;
		// flex-direction: column;
		//    align-items: center;
		height: 100%;
		text-align: center;

		.practice-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 10px;

			.practice-top-currentPage {
				font-size: 16px;
				color: #0CB76C;

				span {
					color: #8E8E8E;
				}
			}

			.practice-top-slider {
				flex: 1;
				margin: 0 10px;

			}

			.practice-top-switch {
				border-radius: 12px;
				font-size: 12px;
				background: #0CB76C;
				display: flex;

				view {
					width: 36px;
					height: 100%;
					color: #FFFFFF;
					text-align: center;
					line-height: 22px;
				}

				.active {
					color: #0CB76C;
					border: 1px solid #0CB76C;
					background: #FFFFFF;
					border-radius: 12px;
				}
			}
		}

		.practice-img {
			height: 185px;

			img {
				width: 320px;
				height: 180px;
			}

			margin: 10px 0 10px 0;
		}

		.practice-context {
			font-size: 14px;
			color: #8E8E8E;
			display: flex;
			flex-direction: column;
			align-items: center;

			.practice-context-title {
				color: #333333;
				font-size: 32px;
				line-height: 45px;

			}

			.practice-context-context {
				margin-top: 10px;
			}

			.practice-context-bottom {
				margin-top: 20px;
				padding: 10px;
				display: flex;
				flex-direction: column;
				align-items: center;

				view {
					white-space: pre-line;
				}
			}

		}

		.practiceFractionBox {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 20px;
			margin-top: 10px;

			.practiceFraction {
				display: inline-block;
				font-size: 28px;

				img {
					width: 55px;
					height: 12px;
					margin-bottom: 6px;
				}

				.context {
					margin-top: 5px;
					display: flex;
					align-items: center;
					color: #8E8E8E;
					font-size: 12px;

					.lebel {
						margin-right: 6px;
					}
				}
			}
		}


		.practice-button {
			height: 110px;
			margin-top: 10px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20px;
			position: fixed;
			width: 100%;
			bottom: 28px;
			box-sizing: border-box;
			background-color: #FFFFFF;

			.wordsVoice {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 26px;
					height: 20px;
				}
			}

			.wordsPlay {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 52px;
					height: 52px;
				}
			}

			.myVoice {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;

				img {
					width: 26px;
					height: 26px;
				}
			}

			.practice-button-complete {
				// margin-right: 68px;
				font-size: 16px;
				color: #0CB76C;

			}

		}

		.practice-bottom {
			position: fixed;
			width: 100%;
			bottom: 0;
			height: 28px;
			background: #E7F8F0;
			color: #0CB76C;
			font-size: 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			line-height: 28px;

			view:nth-child(1) {
				margin-left: 20px;
			}

			view:nth-child(2) {
				margin-right: 20px;
			}

			.practice-bottom-img {
				width: 18px;
				height: 18px;
				margin-left: 20px;
			}
		}




	}

	.van-overlay {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 200;

		.initialImg {
			width: 375px;
			height: 260px;
		}

		.initialDiv {
			width: 102px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			font-size: 12px;
			border: 1px solid #FFFFFF;
			color: #FFFFFF;
			border-radius: 18px;
			position: relative;
			top: 30px;
		}
	}

	.automaticOverlay {
		width: 345px;
		height: 184px;
		background: #FFFFFF;
		border-radius: 15px;
		color: #333333;
		font-size: 16px;
		line-height: 32px;

		.automaticOverlay-context {
			margin: 30px 20px;
		}

		.automaticOverlay-button {
			margin: 0 20px 30px 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				width: 135px;
				height: 40px;
				line-height: 40px;
				text-align: center;
			}

			view:nth-child(1) {
				border: 1px solid #8E8E8E;
				border-radius: 22.5px;
				font-size: #333333;
			}

			view:nth-child(2) {
				border-radius: 22.5px;
				color: #FFFFFF;
				background: linear-gradient(to left, #29F19C, #02A1F9);
			}
		}

	}

	::v-deep .van-slider__button {
		display: none !important;
	}

	.autoRed {
		color: #FA192C !important;
	}

	.autoYellow {
		color: #FF9917 !important;
	}

	.autoGreed {
		color: #0CB76C !important;
	}
</style>